<template>
	<view class="bg">
		<view class="user">
			<text class="t">当前拥有</text>
			<text class="num">{{ userInfo?.redPrice }}</text>
		</view>
		<view class="pocketBox">
			<view class="userDetail">
				用户红包明细
			</view>
			<view class="pocket" v-for="(item, index) in pointsRecord" :key="index">
				<view class="pocket_left">
					<view class="t">{{ item.wishing }}</view>
					<view class="time">{{ item.createTime }}</view>
				</view>
				<view class="pocket_right">
					{{ item.totalAmount || 0 }}
				</view>
			</view>
			<view class="nomore" v-if="!data.loadmore">
				没有更多了
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		liverewardrecord,userInfoGet
	} from '@/api'

	const userInfo = ref(null)
	const pointsRecord = ref([]) //红包记录
	const data = reactive({
		loadmore: true,
		page: {
			current: 1,
			size: 15,
		}
	})
	//红包明细
	const F_liverewardrecord = () => {
		const params = {
			...data.page,
			rewardType: "2"
		}
		liverewardrecord(params).then(res => {
			let points = res.data.records;
			pointsRecord.value = [...pointsRecord.value, ...points];
			if (pointsRecord.value.length < data.page.size) {
				data.loadmore = false;
			}
		})
	}
	//用户中心
	//const userInfo = ref(null);
	const F_userInfoGet =()=>{
		userInfoGet().then((res) => {
			userInfo.value = res.data;
		});
	}
	onReachBottom(() => {
		if (data.loadmore) {
			data.page.current = data.page.current + 1;
			F_liverewardrecord();
		}
	})
	onLoad(() => {
		F_liverewardrecord();
		F_userInfoGet();
	})
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.bg {
		background-color: #fc4631;
		display: flex;
		flex-flow: column nowrap;
		height: 100%;
	}

	.user {
		padding: 70rpx 20rpx;
		display: flex;
		flex-flow: column nowrap;

		.t {
			color: #fff;
		}

		.num {
			font-size: 36rpx;
			color: #ffbbab;
		}
	}

	.pocketBox {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		flex: 1;
		overflow-y: auto;

		.userDetail {
			text-align: center;
			font-size: 24rpx;
			padding: 20rpx;
		}

		.pocket {
			display: flex;
			justify-content: space-between;
			margin: 20rpx;
			padding-bottom: 20rpx;
			align-items: center;
			border-bottom: solid 2rpx #efefef;

			.pocket_left {
				display: flex;
				flex-flow: column nowrap;
				font-size: 24rpx;

				.t {
					color: #333;
				}

				.time {
					color: #999;
				}
			}

			.pocket_right {
				color: red;
			}
		}
	}
	
	.nomore {
		text-align: center;
		color: #999;
		padding: 20rpx 0;
		font-size: 24rpx;
	}
</style>